<template>
  <Row v-bind="row.attr" :name="row.name" :style="row.style" :elementType="row.elementType" :id="row.id" :pid="row.pid">
    <template v-if="children.length===0">
      <template v-if="element.length>0">
        <component v-for="ele in element" :key="ele.name" :id="ele.id" :name="ele.name" 
          :elementType="ele.elementType" :is="ele.tag" v-bind="ele.config.attr" :style="ele.config.style">
          {{!!ele.config.text?ele.config.text:''}}
        </component>
      </template>
      <h3 v-else>{{ row.name }}</h3>
    </template>
    <cli-layout v-for="(child,index) in children" :key="'R'+index" :webObject="webObject" :id="child.id"></cli-layout>
  </Row>
</template>

<script>
import cliTable from './cli-table'
import cliForm from './cli-form'
import cliCell from './cli-cell'
export default {
  name: "cli-layout",
  components:{cliTable,cliForm,cliCell},
  props:{
    webObject:{
      default:()=>{
        return [];
      }
    },
    id:{
      default:()=>{
        return 'elementRoot';
      }
    }
  },
  computed:{
    row(){
      let row = this.webObject.record.layout.find(item=>item.id===this.id);
      return row;
    },
    children(){
      let children = this.webObject.record.layout.filter(item=>item.pid===this.id);
      return children;
    },
    element(){
      let list=this.webObject.record.elements.filter(item=>item.address===this.row.id);
      return list;
    }
  }
}
</script>

<style scoped>

</style>
